import { useState } from "react";
import { Form, Input, Button, MessagePlugin } from "tdesign-react";
import { DesktopIcon, LockOnIcon } from "tdesign-icons-react";
import { useNavigate } from "react-router-dom";
import { globalPage } from "@renderer/config";
import type { FormProps } from "tdesign-react";

const { FormItem } = Form;
const LoginForm = () => {
	const [loading, setLoading] = useState<boolean>(false);
	const [form] = Form.useForm();
	const navigate = useNavigate();
	// 登录
	const onSubmit: FormProps["onSubmit"] = async e => {
		if (e.validateResult === true) {
			try {
				setLoading(true);
				navigate(globalPage.HOME_URL);
				MessagePlugin.success("登录成功");
			} finally {
				setLoading(false);
			}
		}
	};
	const onReset: FormProps["onReset"] = e => {
		console.log(e);
		// MessagePlugin.info("重置成功");
	};
	return (
		<Form form={form} layout="vertical" onSubmit={onSubmit} onReset={onReset}>
			<FormItem
				label=""
				// help="这里请填写用户名"
				name="username"
				// initialData={"张三"}
				rules={[
					{ whitespace: true, message: "请输入用户名" },
					{ required: true, message: "用户名必填", type: "error" },
					{ min: 2, message: "至少需要两个字", type: "error" }
				]}
			>
				<Input prefixIcon={<DesktopIcon />} size="large" clearable={true} placeholder="请输入用户名" />
			</FormItem>
			<FormItem
				label=""
				// help="这里请填写密码"
				name="password"
				rules={[{ required: true, message: "密码必填", type: "error" }]}
			>
				<Input prefixIcon={<LockOnIcon />} type="password" size="large" clearable={true} placeholder="请输入密码" />
			</FormItem>
			<FormItem>
				<div className="login-form-button">
					<Button type="reset" theme="default">
						重置
					</Button>
					<Button type="submit" theme="primary" loading={loading}>
						登录
					</Button>
				</div>
			</FormItem>
		</Form>
	);
};

export default LoginForm;
